<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 100px;width: 100px;float: left;
            background: red;margin-left: 100px;
            border:2px solid blue;
        }
    </style>
</head>
<body>
<!--

			offsetWidth : width + border + padding


			起始值          终点

			100     10


			width    = 	100 + 4 - 1 = 103


		-->
    <div id="box1"></div>
    <div id="box2"></div>
    <script type="text/javascript">
        var box1 = document.getElementById("box1");
        var box2 = document.getElementById("box2");

        //改变高度
        box2.onmouseover = function () {
            startMove1(box2,50);
        }
        box2.onmouseout = function () {
            startMove1(box2,100);
        }

        var timer = null;
        function startMove1(obj,target) {
            clearInterval(timer);
            timer = setInterval(function () {
                //这里采取匀速运动
                //获取属性
                var cssVal = parseInt(getCss(obj,"width"));
                //匀速运动
                if(cssVal>target){
                    speed = -1
                }else {
                    speed = 1;
                }

                if( cssVal==target){
                    clearInterval(timer);
                }else{
                    obj.style.width = cssVal +speed +"px";
                }
                document.title = obj.style.width;
            },30);
        }


        /*
                         getCss ： 获取内联和外联样式,还可以获取行间样式
                         obj : 获取的对象
                         css : 获取对象上属性
                     * */
        function getCss(obj,css) {
            return getComputedStyle(obj, null)[css]
        }






    </script>

</body>
</html>